<template>
    <div>
        <ly-dialog v-model="dialogVisible" :title="loadingTitle" width="560px" :before-close="handleClose">
            <el-form :inline="false" :model="formData" :rules="rules" ref="rulesForm" label-position="right" label-width="auto">
                <el-form-item label="楼盘名称" prop="name">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="编号：" prop="sn">
                    <el-input v-model="formData.sn"></el-input>
                </el-form-item>
                <el-form-item label="门的方位" prop="house_face">
                    <el-input v-model="formData.house_face"></el-input>
                </el-form-item>
                <el-form-item label="朝向" prop="house_near">
                    <el-input v-model="formData.house_near"></el-input>
                </el-form-item>
                <el-form-item label="尺寸" prop="house_size">
                    <el-input v-model="formData.house_size"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="formData.address"></el-input>
                </el-form-item>
                <el-form-item label="商圈" prop="house_build">
                    <el-input v-model="formData.house_build"></el-input>
                </el-form-item>
                <el-form-item label="楼盘性质" prop="house_type">
                    <el-input v-model="formData.house_type"></el-input>
                </el-form-item>
                <el-form-item label="居住规模" prop="house_man">
                    <el-input v-model="formData.house_man"></el-input>
                </el-form-item>
                <el-form-item label="售价元/㎡" prop="house_price">
                    <el-input v-model="formData.house_price"></el-input>
                </el-form-item>

                <el-form-item label="出入口数量" prop="house_exits">
                    <el-input v-model="formData.house_exits"></el-input>
                </el-form-item>
                <el-form-item label="媒体数量" prop="media_nums">
                    <el-input v-model="formData.media_nums"></el-input>
                </el-form-item>
                <el-form-item label="媒体形式" prop="media_type">
                    <el-input v-model="formData.media_type"></el-input>
                </el-form-item>
                <el-form-item label="投放禁忌行" prop="media_disable">
                    <el-input v-model="formData.media_disable"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="handleClose" :loading="loadingSave">取消</el-button>
                <el-button type="primary" @click="submitData" :loading="loadingSave">确定</el-button>
            </template>
        </ly-dialog>
    </div>
</template>

<script>
    import {mallPojectAdd,mallPojectEdit,mallPojectUpload} from "@/api/api";
    import LyDialog from "../../../components/dialog/dialog";
    export default {
        name: "addUser",
        components: {LyDialog},
        emits: ['refreshData'],
        data() {
            return {
                dialogVisible:false,
                loadingSave:false,
                loadingTitle:'',
                isSubmit: true,
                formData:{
                    name:'',
                    filelist:[
                        {name: 'food1.jpeg', url: ''}, 
                        {name: 'food2.jpeg', url: ''}
                    ]
                },
                rules:{
                    name: [
                        {required: true, message: '项目名',trigger: 'blur'}
                    ],
                    filelist: [
                        {required: true, message: '请上传商品默认图片',trigger: 'blur'}
                    ]
                },
                rolelist:[],
                options:[],
            }
        },
        methods:{
            handleClose() {
                this.dialogVisible=false
                this.loadingSave=false
                this.$emit('refreshData')
            },
            addModuleFn(item,flag) {
                this.loadingTitle=flag
                this.dialogVisible=true
                if(item){
                    this.formData = item
                }else{
                   this.formData={
                        name:'',
                        custom:'',
                        times:'',
                        filelist:[]
                   }
                }
            },
            handleChange(uploadFile, uploadFiles) {
                if (this.formData.name==""){
                    this.formData.name=uploadFile.name
                }
                uploadFiles.push(uploadFile)

            },
            handlePreview(file) {
                console.log(file);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`); 
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            submitData() {
                this.$refs['rulesForm'].validate(obj=>{
                    if(obj) {
                        this.loadingSave=true
                        let param = {
                            ...this.formData
                        }
                        if(this.formData.id){
                            mallPojectEdit(param).then(res=>{
                                this.loadingSave=false
                                if(res.code ==2000) {
                                    this.$message.success(res.msg)
                                    this.handleClose()
                                    this.$emit('refreshData')
                                } else {
                                    this.$message.warning(res.msg)
                                }
                            })
                        }else{
                            mallPojectAdd(param).then(res=>{
                                this.loadingSave=false
                                if(res.code ==2000) {
                                    this.$message.success(res.msg)
                                    this.handleClose()
                                    this.$emit('refreshData')
                                } else {
                                    this.$message.warning(res.msg)
                                }
                            })
                        }

                    }
                })
            },
            async imgUploadRequest(param) {
                var that = this
                let obj= await mallPojectUpload(param)
                if(obj.code == 2000) {
                    obj.data.data.forEach(element => {
                        that.formData.filelist.push(element)
                    });
                } else {
                    vm.$message.warning(obj.msg)
                }
            },
            imgUploadSuccess() {
                this.$refs.uploadDefaultImage.clearFiles()
                console.log(this.formData.filelist)
                this.isSubmit=false
            }
        }
    }
</script>
<style scoped>
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 128px;
      height: 128px;
      line-height: 128px;
      text-align: center;
    }
    .avatar {
      width: 128px;
      height: 128px;
      display: block;
    }
</style>

